html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body{
  font-size: 14px !important;
  background-color: $themeFfTo1a;
  color: $theme33To99;
  line-height: normal;
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,STHeiti,Microsoft Yahei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}

a {
  color: $theme33To99;
  text-decoration: none;
}

div {
  word-wrap: break-word;
  word-break: break-all;
}

textarea {
  border: 0;
  outline: 0;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
  padding: 0;
}

input {
  border: 0;
  outline: 0;
  -webkit-appearance: none;
}

img {
  display: inline-block;
}

.img-wrap {
  & > img {
    width: 100%;
    height: 100%;
  }
}


/*text-align*/
.tx-l {
  text-align: left;
}
.tx-c {
  text-align: center;
}
.tx-r {
  text-align: right;
}
.tx-dt{
  text-decoration: line-through;
}


/*word-break*/
.wb{
	word-wrap: break-word;
	word-break: break-all;
}


/*float*/
.fl{
	float: left;
}
.fr{
	float: right;
}
.clear {
  overflow: hidden;
}


/*overflow*/
.of{
	overflow: hidden;
}
.of-y-a {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.of-x-a {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}


/*display*/
.bs{
  box-sizing: border-box;
}
.db{
	display: block;
}
.dib{
	display: inline-block;
}
.df{
	display: flex;
}
.dn{
	display: none;
}


/*flex*/
.df-c{
  display: flex;
  justify-content: center;
  align-items: center;
}
.df-l{
	justify-content: flex-start;
	align-items: center;
}
.df-r{
	justify-content: flex-end;
	align-items: center;
}
.df-col {
  display: flex;
  flex-direction: column;
}

/**
.df1 {flex: 1}
 */
@for $i from 1 through 10 {
  .df#{$i} { flex: $i; min-width: 0 }
}


/*字体*/
@for $i from 8 through 32 {
  .fs#{$i} { font-size: #{$i}px; }
}
.fb {
  font-weight: bold;
}
.f600{
  font-weight: 600;
}
.f700{
  font-weight: 700;
}
.f900{
  font-weight: 900;
}



/* 高度 和 行高 */
.lh-normal {
  line-height: normal;
}
@include getHeightClass(100, '%', p);



/* 宽度 */
@include getWidthClass(100, '%', p);



/*颜色*/
.cFFF{color: #FFFFFF;}
.c333{color: #333333;}
.c666{color: #666666}
.c999{color: #999999}
.cCCC{color: #cccccc}
.bcFFF{background-color: #FFFFFF;}
.bc4E{background-color: #4e4e4e;}
.bcE7{background-color: #e7e7e7;}
.bcF4{background-color: #f4f4f4;}
.bcCCC{background-color: #cccccc}
/* 主题色系列 */
.theme-color {color: $themeColor;}
.theme-bc {background-color: $themeColor;}
.theme-ub {
  @include getBorder($themeColor);
}
.theme-ubb {
  @include getBorderBottom($themeColor);
}
.theme-ubt {
  @include getBorderTop($themeColor);
}
.theme-ubl {
  @include getBorderLeft($themeColor);
}
.theme-ubr {
  @include getBorderRight($themeColor);
}



/* 边框 */
.ub_1px {
  @include getBorder($borderColor);
}
.ubt_1px {
  @include getBorderTop($borderColor);
}
.ubb_1px {
  @include getBorderBottom($borderColor);
}
.ubl_1px {
  @include getBorderLeft($borderColor);
}
.ubr_1px {
  @include getBorderRight($borderColor);
}


/*设置placeholder的字体颜色*/
$placeholderLineHeight: 1.3;
::-webkit-input-placeholder {
  color: $placeHolderColor;
  line-height: $placeholderLineHeight;
  font-size: inherit;
}
::-moz-placeholder {
  color: $placeHolderColor;
  line-height: $placeholderLineHeight;
  font-size: inherit;
}
:-ms-input-placeholder {
  color: $placeHolderColor;
  line-height: $placeholderLineHeight;
  font-size: inherit;
}
:-moz-placeholder {
  color: $placeHolderColor;
  line-height: $placeholderLineHeight;
  font-size: inherit;
}
input::-webkit-input-placeholder {
  position: relative;
  top: 1px;
}
input::-moz-placeholder {
  position: relative;
  top: 1px;
}
input:-ms-input-placeholder {
  position: relative;
  top: 1px;
}
input:-moz-placeholder {
  position: relative;
  top: 1px;
}


/* z-index */
.zIndex3000 {
  z-index: 3000 !important;
}



/**
  v-img-load
 */
.v-img-load-error {
  background-image: url("../assets/images/default/image_fail.png") !important;
  background-size: auto 60% !important;
  background-color: #f4f4f4 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.v-img-load-loading {
  background-image: url("../assets/images/default/default.png") !important;
  background-size: contain !important;
  background-color: #f4f4f4 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}



/*多行显示……*/
@include getLineClamp(2);
@include getLineClamp(3);
/*单行显示...*/
.dot {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}



/* 三角 */
.down-triangle {
  @include getDownTriangle(null, $traingleWidth)    //  颜色继承
}
.up-triangle {
  @include getUpTriangle(null, $traingleWidth)
}
.left-triangle {
  @include getLeftTriangle(null, $traingleWidth)
}
.right-triangle {
  @include getRightTriangle(null, $traingleWidth)
}


/*箭头*/
.up-arrow {
  @include getUpArrow()
}
.right-arrow {
  @include getRightArrow()
}
.down-arrow {
  @include getDownArrow()
}
.left-arrow {
  @include getLeftArrow()
}



/* 宽高比插件 postcss-aspect-ratio-mini 配置以及 通用比例设置*/
.aspectratio {
  position: relative;
}
.aspectratio::before {
  content: '';
  display: block;
  width: 1px;
  margin-left: -1px;
  height: 0;
}
.aspectratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.w-1-1 {
  aspect-ratio: '1:1'
}
.w-2-1 {
  aspect-ratio: '2:1'
}
.w-16-9 {
  aspect-ratio: '16:9'
}
.w-4-3 {
  aspect-ratio: '4:3'
}



/*富文本*/
.richtext-show-wrap {
  line-height: 1.8;
  img {
    max-width: 100% !important;
  }
  table {
    border: 1px solid #ddd;
    width: 100%;
    max-width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
    thead {
      tr {
        th {
          border: 1px solid #ddd;
          padding: 8px;
        }
      }
    }
    tbody {
      tr {
        td {
          border: 1px solid #ddd;
          padding: 8px;
        }
      }
    }
  }

  ul, ol {
    list-style:disc outside none;
    margin: 15px 0;
    padding: 0 0 0 40px;
    line-height: 1.6;

    ul, ol {
      padding-left: 30px;
    }

    ul {
      list-style: circle outside none;

      ul {
        list-style: square outside none;
      }
    }
  }

  ol {
    list-style:decimal;
  }
}



/** 按钮 **/
@mixin btn {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 3px;
}
.common-btn {
  @include btn();
}
.primary-btn {
  @include btn();
  //@include getBorder($themeColor);
  border: 1px solid $themeColor;
  background-color: #FFFFFF;
  color: $themeColor;
  &:active {
    background-color: #f9fafb;
  }
  &.inactive-btn {
    opacity: 0.3;
    &:active {
      background-color: #FFFFFF;
    }
  }
}
.submit-btn {
  @include btn();
  background-color: $themeColor;
  color: #FFFFFF;
  &:active {
    background-color: hsla(109, 51%, 48%, 1);
  }
  &.inactive-btn {
    opacity: 0.3;
    &:active {
      background-color: $themeColor;
    }
  }
}
.disabled-btn {
  @include btn();
  background-color: #cccccc;
  color: #FFFFFF;
}
.small-btn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
.round-btn {
  border-radius: 44px;
}



/*圆角*/
@include getBorderRadius(0);
@include getBorderRadius(2);
@include getBorderRadius(4);
@include getBorderRadius(6);
@include getBorderRadius(100, '%', p);  //  只得到 .br100p {border-radius: 100%;}


/* 高度 和 行高 */
@include getHeightClass(44);

/*行高*/
@include getLineHeightClass((1 2), null);   //  .lh1p2 {line-height: 1.2}

/*margin*/
@include getMargin(12);
@include getMargin(20);

/*padding*/
@include getPadding(5);
@include getPadding(10);
@include getPadding(12);
@include getPadding(15);

.rich-text-wrap {
  font-size: 14px;
  line-height: 2;
  strong {
    font-weight: bold;
  }
  p {
    margin: .65em 0;
  }
  img {
    max-width: 100%;
    border-radius: 2px;
    margin: .6em auto;
    display: flex;
    filter: brightness(.95);
  }
}
